import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import router, { asyncRoutes } from '@/router'
import store from '@/store'

import getPageTitle from '@/utils/get-page-title'

// router.beforeEach：页面跳转之前一定会经过这里
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  console.log(to, 'tototoot')
  document.title = getPageTitle(to.meta.title)
  console.log(from.path, '从哪里来')
  const whiteList = ['/login', '/404']
  // 判断用户是否登陆
  const token = store.state.user.token
  if (token) {
    console.log('已经登陆')
    // 判断是否去登陆页面
    if (to.path === '/login') {
      console.log('您已登录，不能再去登陆页，直接去首页')
      next('/')
      //  如果next('指定了路径跳转页面')，那么就不会经过router.afterEach
      NProgress.done()
    // 如果next()直接放行，那么才会经过router.afterEach
    } else {
      console.log('已经登陆 去其他页面，放行')
      // 触发actions中的函数，发送请求获取用户的信息
      // 判断用户信息是否已经获取了，如果已经获取就不需要再获取
      if (!store.state.user.userInfo.userId) {
        const menus = await store.dispatch('user/getUserInfo')
        // ['employees', 'settings', 'permissions', 'departments']
        console.log(menus, '用户页面级别的权限数据')
        console.log(asyncRoutes, '{asyncRoutes} ')
        // 使用权限信息筛选出用户可以访问的动态路由
        const filterRoutes = asyncRoutes.filter(route => {
          return menus.includes(route.children[0].name) // true 有权限 || false  没有权限
        })
        console.log(filterRoutes)
        // 需要权限的信息，根据权限信息动态的添加路由，渲染左侧菜单
        // 动态的添加用户可以访问的路由
        // 使用addRoutes动态添加的路由，使用router.options.routes是获取不到的
        // { path: '*', redirect: '/404', hidden: true }将404路由对象放所有的动态路由的后面，解决页面刷新404问题
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(filterRoutes)
        // 将动态的添加的路由存储到vuex里面
        // store.commit('模块名/函数名',filterRoutes)
        store.commit('menus/setMenus', filterRoutes)

        // 404 解决刷新出现白屏的问题
        // 使用next({ ...to,replace: true})来确保addRoutes()时动态添加的路由已经被完全加载上去。
        // replace: true  保证动态路由添加完成了，才去访问对应的页面
        next({ ...to, replace: true })
      } else {
        next()
      }
    }
  } else {
    console.log('没有登陆')
    // 判断是否有白名单： 白名单指的是不需要访问权限的页面 login
    if (whiteList.includes(to.path)) {
      console.log('拥有白名单，放行')
      next()
    } else {
      console.log('没有白名单，需要权限，请先登陆')
      next('/login')
      NProgress.done() // 指定关闭
    }
  }
})
// 页面跳转完成会经过这个钩子函数
router.afterEach(() => {
  console.log('页面跳转完成')
  NProgress.done()
})
